<template>
	<view v-if="cont.courseName" class="container" :style="theme">
		<view class="banner" :style="{backgroundImage: 'url(' + cont.courseImage + ')'}"></view>
		<view class="head card">
			<view class="head-cont">
				<view class="title" :class="cont.courseType=='1'?'': 'lv'">
					<text>{{cont.courseType=='1'?'团体课':cont.courseType=='4'?'私教课': '长期课'}}</text>
					<block>{{cont.courseName}}</block>
				</view>
				<view class="money">
					<view class="price flex">
						<view v-if="cont.price && cont.price > 0" class="je">¥<text>{{cont.price}}</text></view>
						<view v-else class="green">免费</view>
						<view class="ks"><text>{{cont.courseType!='4'?cont.classNum || 0:cont.duration || 0}}</text>{{cont.courseType=='4'?'分钟':'课时'}}</view>
						<view v-if="cont.courseType=='4'" class="lx">{{cont.classType == 1?'一对多':'一对一'}}</view>
					</view>
				</view>
				<block v-if="cont.courseType=='4'">
					<view v-if="cont.beginDate" class="info">上课时间：{{cont.beginDate }}</view>
					<view class="info">上课地点：{{cont.site}}</view>
				</block>

				<view v-if="cont.courseType!='4'" class="info">{{cont.introduction}}</view>
			</view>
		</view>
		<block v-if="cont.courseType=='4'">
			<view v-if="cont.teacherInfo && cont.teacherInfo.length> 0" class="card">
				<view class="bt">选择教练</view>
				<scroll-view v-if="cont.teacherInfo && cont.teacherInfo.length > 0" scroll-x class="teacherTab">
					<view v-for="(item, index) in cont.teacherInfo" :key="index" class="li" :class="teacherIndex === index?'on':''"  @click="teacherIndex = index">
						<image :src="item.teacherImg ? item.teacherImg : imgHost+'/user.png'"></image>
						<view class="name">{{item.teacherName}}</view>
						<view class="lx">{{item.teacherLevel || ''}}</view>
						<view class="num">累计{{item.allClassTime || 0}}课时</view>
					</view>
				</scroll-view>
			</view>
			<view v-if="cont.teacherInfo && cont.teacherInfo.length == 1" class="coach">
				<image :src="cont.teacherInfo[0].teacherImg ? cont.teacherInfo[0].teacherImg : imgHost+'/user.png'" />
				<view class="coach-right">
					<view class="name">{{cont.teacherInfo[0].teacherName}}<text
							v-if="cont.teacherInfo[0].teacherLevel">{{cont.teacherInfo[0].teacherLevel}}</text></view>
					<view class="ks">累计<text>{{cont.teacherInfo[0].allClassTime || 0}}</text>课时</view>
				</view>
			</view>
		</block>
		<view v-if="cont.courseType!='4'" class="card">
			<view class="bt">课程信息</view>
			<view v-if="cont.teacherInfo && cont.teacherInfo.length == 1" class="coach cg">
				<image :src="cont.teacherInfo[0].teacherImg ? cont.teacherInfo[0].teacherImg : imgHost+'/user.png'" />
				<view class="coach-right">
					<view class="name">{{cont.teacherInfo[0].teacherName}}<text
							v-if="cont.teacherInfo[0].teacherLevel">{{cont.teacherInfo[0].teacherLevel}}</text></view>
					<view class="ks">累计<text>{{cont.teacherInfo[0].allClassTime || 0}}</text>课时</view>
				</view>
			</view>
			<view class="label" v-if="cont.beginDate">
				<view class="label-left">开课日期</view>
				<view class="label-right">{{cont.beginDate}}</view>
			</view>
			<view class="label" v-if="cont.courseEndDate">
				<view class="label-left">结课日期</view>
				<view class="label-right">{{cont.courseEndDate}}</view>
			</view>
		<!-- 	<view class="label">
				<view class="label-left">有效期</view>
				<view class="label-right">
					{{ cont.termNum && cont.termType ?cont.termNum:'' }}{{ cont.termNum && cont.termType && cont.termType == "0" ? '年': cont.termNum && cont.termType && cont.termType == "1" ? '月': cont.termNum && cont.termType && cont.termType == "2" ? '日':'无' }}
				</view>
			</view> -->
			<view class="label" v-if="cont.endTime">
				<view class="label-left">报名截止</view>
				<view class="label-right">{{cont.endTime}}</view>
			</view>
			<!-- <view class="label">
				<view class="label-left">课程类型：</view>
				<view class="label-right">{{cont.courseItem}}</view>
			</view> -->
			<view class="label">
				<view class="label-left">报名人员：</view>
				<view class="label-right"><text v-if="cont.numLimit == 2">限{{cont.peopleNumLow}}～{{cont.peopleNumUp}}人</text><text v-else>不限制</text>｜已报名<text
						class="redColor">{{cont.peopleNum}}</text>人</view>
			</view>
			<view class="label">
				<view class="label-left">上课地点：</view>
				<view class="label-right">{{cont.site}}</view>
			</view>
		</view>
		<view class="card">
			<view class="bt">课程详情</view>
			<u-parse :content="cont.des"></u-parse>
		</view>
		<view class="bottomState flex-cb">
			<view class="f28 cDD5040 flex-cc" @click="jump('/pages/index/index','', 1)">
				<image
					:src="renovationInfo.navigationList && renovationInfo.navigationList.length > 0?renovationInfo.navigationList[0].iconSelected:imgHost+'/nav_home_sel.png'">
				</image>
				<view>首页</view>
			</view>
			<view class="flex-left">
				<button class='share' open-type="share" @click="share">分享好友</button>
				<view v-if="cont.status=='2' && cont.courseType!='4'" class="registerNow" @click="jump2('/pages/curriculum/signup?id=', id)">
					立即报名</view>
					<view v-if="cont.status=='2' && cont.courseType=='4'" class="registerNow" @click="yyBtn">
					预约</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				teacherIndex: 0,
				cont: {}
			}
		},
		computed: mapState(["renovationInfo"]),
		onLoad(ops) {
			this.id = ops.id
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			yyBtn() {
				let teacherId = this.cont.teacherInfo[this.teacherIndex].teacherId
				this.jump2('/pages/curriculum/reservation?id=', this.id + '&teacherId=' + teacherId)
			},
			share() {
				let summary = this.info.introduction
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					title: '课程分享',
					summary: summary, // 分享内容文字
					success: function() {
						// 此处是调起微信分享成功的回调
					},
					fail: function() {
						// 此处是调起微信分享失败的回调
					}
				});
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.infoCourseMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							courseId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 120rpx;
	}

	.banner {
		width: 100%;
		height: 388rpx;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.card {
		background-color: #ffff;
		margin-bottom: 24rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 8rpx;

		.bt {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-bottom: 30rpx;
		}
	}

	.head {
		margin-top: -30rpx;

		.head-cont {
			.title {
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;

				text {
					height: 40rpx;
					line-height: 40rpx;
					background: $color;
					border-radius: 8rpx;
					display: inline-block;
					padding: 0 10rpx;
					margin-right: 20rpx;
					font-size: 22rpx;
					color: #ffff;
				}

			}

			.info {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 15rpx;
				line-height: 1.5;
			}

			.money {
				margin-top: 15rpx;

				.price {
					font-size: 28rpx;

					.je {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $red;

						text {
							font-weight: bolder;
						}
					}

					.ks {
						font-size: 22rpx;
						color: #666666;
						margin-left: 18rpx;
						padding-left: 18rpx;
						border-left: 1px solid #E5E5E5;
						height: 28rpx;
						line-height: 28rpx;

						text {
							font-size: 30rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}

					.lx {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 18rpx;
						padding-left: 18rpx;
						border-left: 1px solid #E5E5E5;
						height: 28rpx;
						line-height: 28rpx;
					}
				}
			}

		}

	}


	.coach {
		background: #FFFFFF;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 30rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		margin-bottom: 30rpx;
		&.cg {
			width: 100%;
			border-bottom: 1px solid #EEEEEE;
		}

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.coach-right {
			flex: 1;

			.name {
				font-weight: 500;
				color: #222222;
				font-size: 30rpx;
				margin-bottom: 12rpx;
				line-height: 1.5;

				text {
					color: $color;
					font-size: 22rpx;
					line-height: 32rpx;
					padding: 0 10rpx;
					border-radius: 4rpx;
					border: 1px solid $color;
					margin-left: 16rpx;
				}
			}


			.ks {
				font-size: 26rpx;
				line-height: 1.5;
				font-weight: 400;
				color: #999;
			}
		}
	}

	.label {
		display: flex;
		margin-top: 20rpx;
		line-height: 1.5;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;

		.label-left {
			color: #666666;
			display: inline-block;
			width: 5em;
		}

		.label-right {
			flex: 1;
		}
	}



	.bmry {
		display: flex;
		flex-wrap: wrap;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		z-index: 99999;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.bottomState .flex-cc {
		width: 100rpx;
		flex-direction: column;
	}

	.bottomState .flex-cc image {
		width: 44rpx;
		height: 44rpx;
	}

	.share {
		height: 68rpx;
		padding: 0 34rpx;
		color: $color;
		border: 1px solid $color;
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}

	.registerNow {
		height: 68rpx;
		padding: 0 34rpx;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
		margin-left: 20rpx;
	}

	.cancel {
		height: 68rpx;
		padding: 0 34rpx;
		color: #666666;
		border: 1px solid #999999;
		font-size: 28rpx;
		border-radius: 34rpx;
		line-height: 68rpx;
	}

	.finishedColor {
		background: #CCCCCC;
	}

	.teacherTab {
		white-space: nowrap;
		display: flex;
		width: 100%;

		.li {
			text-align: center;
			display: inline-block;
			margin-right: 20rpx;
			width: 216rpx;
			height: 266rpx;
			padding-top: 24rpx;
			box-sizing: border-box;
			background: $bjColor;
			border: 1rpx solid $bjColor;
			border-radius: 8rpx;
			position: relative;
			overflow: hidden;

			&:last-of-type {
				margin-right: 0;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				border: 1rpx solid $bjColor;
			}

			view {
				line-height: 1.2;
				margin-top: 8rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}

			.name {
				color: #333333;
			}

			.lx {
				font-size: 26rpx;
				color: $color;
			}

			.num {
				color: #999999;
				font-size: 26rpx;
			}

			&.on {
				border-color: $color;

				&:before {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					border: 32rpx solid $color;
					border-bottom-color: transparent;
					border-left-color: transparent;
				}

				&:after {
					content: '';
					width: 5rpx;
					height: 12rpx;
					position: absolute;
					right: 12rpx;
					top: 10rpx;
					border: 2px solid #fff;
					border-top-color: transparent;
					border-left-color: transparent;
					transform: rotate(45deg);
				}
			}

		}
	}
</style>